<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <!-- 搜索区域 -->
      <a-form-model
        ref="formModel"
        :model="form"
        layout="inline"
        :rules="{
          name: [
            {
              validator: validators.noWhitespace(),
              trigger: 'change',
            },
            {
              validator: validators.noIllegalString(),
              trigger: 'change',
            },
            {
              max: 10,
              message: '长度在 1 到 10 个字符',
              trigger: 'change',
            },
          ],
        }"
      >
        <a-row :gutter="[16, 16]" type="flex" justify="end">
          <a-col :md="6" :sm="8">
            <a-form-model-item prop="name" label="应用名称">
              <a-input autocomplete="off" v-model="form.name" />
            </a-form-model-item>
          </a-col>
          <span
            style="float: left; overflow: hidden"
            class="table-page-search-submitButtons"
          >
            <a-col :md="12" :sm="24">
              <a-button
                type="primary"
                @click="loadData(true)"
                icon="search"
                style="margin-left: 21px"
              >
                查询
              </a-button>
              <a-button
                @click="resetSearchForm"
                icon="reload"
                style="margin-left: 8px"
              >
                重置
              </a-button>
            </a-col>
          </span>
        </a-row>
      </a-form-model>
    </div>
    <a-table
      ref="table"
      rowKey="id"
      size="middle"
      :columns="columns"
      :dataSource="gDataSource"
      :pagination="gPagination"
      @change="gHandleTableChange"
    >
      <!-- <span slot="dateCol" style="display: block;text-align: center" slot-scope="text">
        {{
          text
        }}
      </span> -->
      <span slot="sortCol" slot-scope="text, record, index">
        {{
          (gPagination.current - 1) * gPagination.pageSize + parseInt(index) + 1
        }}
      </span>
      <span slot="action" slot-scope="text, record">
        <a-button
          type="primary"
          size="small"
          icon="profile"
          @click="handleDetail(record)"
        >
          日志
        </a-button>

        <template v-if="record.status === 3 && record.schedulerModel !== null && record.schedulerModel !== ''">
          <a-divider type="vertical" />
          <a-button
            type="primary"
            size="small"
            @click="handleAnalysis(record)"
          >
            <img src="@assets/analysis.svg" style="margin-bottom: 3px;margin-right: 6px;height: 18px;" />
            分析
          </a-button>
        </template>
      </span>
      <span slot="schedulerProgress" slot-scope="text, record">
        <a-progress
          :percent="floatParse(record.schedulerProgress)"
          :status="statusMap[record.status]"
          :format="(percent) => `${percent}%`"
          style="display: inline-block;width: 72%"
        />
        <span style="display: inline-block; margin-left: 20px">
          <template v-if="statusMap[record.status] === 'normal'">
            <a-spin size="small" />
            <!-- <a-icon type="loading" style="font-size: 12px" /> -->
          </template>
          <template v-else-if="statusMap[record.status] === 'exception'">
            <a-icon type="close-circle" style="font-size: 12px; color: red" />
          </template>
          <template v-else-if="statusMap[record.status] === 'success'">
            <a-icon type="check-circle" style="font-size: 12px; color: green" />
          </template>
        </span>
      </span>
      <a-tooltip
        slot="cloudType"
        slot-scope="text, record"
        placement="topLeft"
        :title="text"
      >
        <span
          style="vertical-align: middle"
        >
          <template v-if="record.cloudResourceTypeName === '容器云'">
            <img src="~@/assets/k8s_logo.svg" alt="logo" style="width: 18px" />
          </template>
          <template v-else-if="record.cloudResourceTypeName === '华为云'">
            <img src="~@/assets/huawei_logo.png" alt="logo" style="width: 18px" />
          </template>
          <template v-else>
            <img src="~@/assets/aliyun_logo.png" alt="logo" style="width: 18px" />
          </template>
          {{ text }}
        </span>
      </a-tooltip>
      <a-tooltip
        slot="tipName"
        slot-scope="text"
        placement="topLeft"
        :title="text"
      >
        <span>{{ text }}</span>
      </a-tooltip>
      <a-tooltip
        slot="schedulerModel"
        slot-scope="text"
        placement="topLeft"
        :title="schedulerModelTypeMap[text] || '手动自定义调度'"
      >
        <span>{{ schedulerModelTypeMap[text] || "手动自定义调度" }}</span>
      </a-tooltip>
    </a-table>
    <detail-modal ref="detailModal"></detail-modal>
    <analysis-modal ref="analysisModal"></analysis-modal>
  </a-card>
</template>

<script>
import { GwListMixin } from "@/mixins/GwListMixin";
import { gPostAction } from "@/api/manage";
import DetailModal from "./modules/DetailModal";
import AnalysisModal from "./modules/AnalysisModal ";

export default {
  name: "F030202",
  mixins: [GwListMixin],
  components: {
    DetailModal,
    AnalysisModal,
  },
  data() {
    return {
      // 表头
      columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 50,
          scopedSlots: { customRender: "sortCol" },
        },
        {
          title: "应用名称",
          ellipsis: true,
          dataIndex: "appName",
          scopedSlots: { customRender: "tipName" },
        },
        {
          title: "调度实例",
          ellipsis: true,
          dataIndex: "instanceName",
          scopedSlots: { customRender: "cloudType" },
        },
        {
          title: "进度",
          width: "160px",
          dataIndex: "statusName",
          scopedSlots: { customRender: "schedulerProgress" },
        },
        {
          title: "原数据中心",
          ellipsis: true,
          dataIndex: "srcDatacenterName",
          scopedSlots: { customRender: "tipName" },
        },
        {
          title: "目标数据中心",
          ellipsis: true,
          dataIndex: "dstDatacenterName",
          scopedSlots: { customRender: "tipName" },
        },
        {
          title: "调度模型",
          ellipsis: true,
          dataIndex: "schedulerModel",
          scopedSlots: { customRender: "schedulerModel" },
        },
        // {
        //   title: "迁移工具",
        //   dataIndex: "schedulerModelTool",
        //   width: "80px",
        //   customRender: text => this.schedulerModelToolTypeMap[text],
        // },
        {
          title: "开始时间",
          align: "center",
          width: 100,
          dataIndex: "beginTime",
        },
        {
          title: "结束时间",
          align: "center",
          width: 100,
          dataIndex: "endTime",
        },
        {
          title: "操作",
          width: "180px",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
        },
      ],
      schedulerModelTypeMap: ["最优成本代价模型", "最优设备代价模型","最优能效代价模型","配电子网均衡代价模型"],
      schedulerModelToolTypeMap: [
        "Kubernetes迁移工具",
        "阿里云迁移工具",
        "华为迁移工具",
      ],
      schedulerStrategyConfigTypeMap: ["全量迁移", "模版迁移"],
      url: {
        list: "/scheduler/job/page",
      },
      form: {
        name: "",
      },
      statusMap: {
        0: "normal",
        1: "normal",
        2: "exception",
        3: "success",
      },
      timer: "",
    };
  },
  mounted() {
    this.loadData();
    // this.timer = setInterval(this.loadData, 5000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    floatParse(val) {
      if (val) {
        return parseFloat(val);
      } else {
        return 0;
      }
    },
    loadData(isDoSearch) {
      if (!this.$refs.formModel) {
        return;
      }
      this.$refs.formModel.validate((error) => {
        if (!error) {
          return;
        }
        this.gQueryParam.name = this.form.name;
        this.gQueryParam.title = "多数据中心调度-动态调度机制-调度过程监控";
        this.gQueryParam.content = "查询调度过程监控列表";
        this.gQueryParam.status = this.form.status;
        if (isDoSearch) {
          this.gQueryParam.pageNo = 1;
          this.gPagination.current = 1;
        }
        gPostAction(this.url.list, this.gQueryParam).then((res) => {
          if (res.success) {
            this.gDataSource = res.data.list;
            this.gPagination.total = res.data.totalCount;
            let doTimer = false;
            this.gDataSource.forEach(element => {
              if (element.status && element.status < 2) {
                doTimer = true;
              }
            });
            if (doTimer) {
              setTimeout(this.loadData, 5000);
            }
          }
        });
      });
    },
    handleDetail(data) {
      this.$refs.detailModal.showModal(data);
    },
    handleAnalysis(data) {
      this.$refs.analysisModal.showModal(data);
    },
    resetSearchForm() {
      this.form.name = "";
      this.$refs.formModel.resetFields();
    },
  },
};
</script>
